<?php 
$models = $this->Store->products_mdels();
$display = 5;
$group = 4
?>

<div  id="features">
<?php for ($i = 1; $i <= $display; $i++) { 
	$ofset = $i * $group - $group;
?>
	
	<table class='models' width="100%" cellpadding="0" cellspacing="0">
		<?php foreach ($models as $model_id => $model_name) {?>
		<tr>
			<td width="220px" valign="middle" height="<?php echo $params['height']+13?>px">
				<?php echo $this->Html->link('<span class="model-name">'.$model_name.'</span>', array('plugin'=>'store','controller'=>'products','action' => 'display', "model_id:{$model_id}",Inflector::slug($model_name,'-')),array('escape'=>false , 'title'=>$model_name )); ?>
			</td>
			<td valign="middle">
				<?php 

					$items_ = $this->Store->products(1,array('limit'=>"{$group} OFFSET {$ofset}",'conditions'=>array('model_id'=>$model_id)));
				?>
				<table class="gallery">
					<tr>
					<?php foreach ($items_ as $jj => $photo) {?>
					<td class="corners">	
						<?php $thumb = $this->Html->url('/', true).str_replace(' ',"%20",$fileUpload->image($photo['StoreUpload']['name'],array('autoResize'=>true,'width'=>$params['width'],'imagePathOnly'=>true)));?>
						<?php echo $this->Html->link("&nbsp;", array('plugin'=>'store','controller'=>'products','action' => 'view', $photo['StoreProduct']['id'],Inflector::slug($photo['StoreProduct']['name'],'-')),array('escape'=>false,'class'=>"highslide", 'title'=>$photo['StoreProduct']['name'], 'style'=>"background: url(".$thumb.") center no-repeat;")); ?>
					</td>
					<?php }?>
					</tr>
				</table>
			</td>
		</tr>
		<?php }?>
		
		<tr>
			<td width="220px" valign="middle" height="<?php echo $params['height']+13?>px">
				<?php echo $this->Html->link('<span class="model-name">'.__('Most Viewed',true).'</span>', array('plugin'=>'store','controller'=>'products','action' => 'display', "moust_viewed"),array('escape'=>false , 'title'=>__('Moust Viewed',true) )); ?>
			</td>
			<td valign="middle">
				<?php 

					$items_w = $this->Store->products('moust_viewed',array('limit'=>"{$group} OFFSET {$ofset}"));
				?>
				<table class="gallery">
					<tr>
					<?php foreach ($items_w as $kk => $photo) {?>
					<td class="corners">	
						<?php $thumb = $this->Html->url('/', true).str_replace(' ',"%20",$fileUpload->image($photo['StoreUpload']['name'],array('autoResize'=>true,'width'=>$params['width'],'imagePathOnly'=>true)));?>
						<?php echo $this->Html->link("&nbsp;", array('plugin'=>'store','controller'=>'products','action' => 'view', $photo['StoreProduct']['id'],Inflector::slug($photo['StoreProduct']['name'],'-')),array('escape'=>false,'class'=>"highslide", 'title'=>$photo['StoreProduct']['name'], 'style'=>"background: url(".$thumb.") center no-repeat;")); ?>
					</td>
					<?php }?>
					</tr>
				</table>
			</td>
		</tr>
		
	</table>
	
<?php }?>	
</div>
<?php
echo $javascript->codeBlock("
	$(document).ready(function(){ $('#features').jshowoff({autoPlay: true}); });
",$options = array('allowCache'=>false,'safe'=>false,'inline'=>false));
?>


<?php 
$this->Html->styleBlock("
	table.models tr td {border-bottom: solid 1px #e5e5e5;}
	span.model-name { font-size: 16px;  font-weight: bold; color: #012351; display: block; width: 200px height: {$params['height']} }
	table.gallery { padding:0px; margin: 0px; height: ".($params['height'])."px; }
	table.gallery tr td { border-bottom: none; padding: 0px; width: ".($params['width'])."px; height: ".($params['height'])."px; margin: {$params['margin']}px; z-index: 90;}
	table.gallery tr td:hover { background: url(../../img/".HOST."/bg_thumb.jpg) center no-repeat; }
	table.gallery tr td a.highslide { display: block; text-decoration:none; width: ".($params['width'])."px; height: ".($params['height'])."px; padding: {$params['padding']}px;  border: solid {$params['border']}px #d2d2d2; background-position: center; background-repeat: no-repeat; float: left; overflow: hidden;}
	table.gallery tr td a.highslide:hover { padding: {$params['padding']}px;  }
	table.gallery tr td a.link-more { display: block; text-align: right; color: #fff; font-size: 14px;  text-decoration: none; background: url(../../../img/".HOST."/button.png) top left no-repeat;    border: none; background-position: center; background-repeat: no-repeat; float: left; overflow: hidden;}
	table.gallery tr td a.link-more { width: 130px; height: 20px; margin: 0px; padding: 5px 30px 0px 0px; }
",array('inline'=>false));
?>
